{% extends 'base.html' %}
{% block title %}小涛博客 - 文章列表 {% endblock %}
{% block nav_article_active %}active{% endblock %}

{% load staticfiles %}
{% load comment_tags %}
{% load likes_tags %}

{% block header_extends %}
    <link rel="stylesheet" href="{% static 'css/index.css' %}">
{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="align-center align-middle" id="masthead" style="height: 426px;">
        <div class="blog-background" style="background-image: url('{% static 'images/blog-list-bg.jpg' %}');"></div>
        <div class="inner"></div>
    </div>
    <div class="orther_body">
        <div class="container">
            <div class="row t_nav">
                <div class="col-md-4">
                    <a href="{% url 'home' %}" class="n1">网站首页</a>
                    <a href="{% url 'blog_list' %}" class="n2">文章列表</a>
                </div>
                <div class="col-md-8">
                    <span class="pull-right">时光飞逝，机会就在我们眼前，学会把握机遇。</span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-9">
                    <!-- content start -->
                    <div class="blogsbox">
                        {% for blog in blogs %}
                            <div class="blogs" data-scroll-reveal="enter bottom over 1s">
                                <h3 class="blogtitle">
                                    <a href="{% url 'blog_detail' blog.pk %}">{{ blog.title }}</a>
                                </h3>
                                <span class="blogpic">
                                    <a href="{% url 'blog_detail' blog.pk %}" title="{{ blog.title }}">
                                        <img src="/uploads/{{ blog.picture }}" alt="{{ blog.title }}">
                                    </a>
                                </span>
                                <p class="blogtext">
                                    <a href="{% url 'blog_detail' blog.pk %}">
                                        {{ blog.content|striptags|truncatechars:450 }}
                                    </a>
                                </p>
                                <div class="bloginfo">
                                    <ul>
                                        <li class="author">
                                            <a href="{% url 'blog_detail' blog.pk %}">
                                                <i class="fa fa-user"></i>&nbsp;小涛
                                            </a>
                                        </li>
                                        {% comment %}<li class="lmname">
                                            <a href="{% url 'blogs_with_type' blog.blog_type.pk %}">
                                                <i class="fa fa-bookmark"></i>&nbsp;{{ blog.blog_type }}
                                            </a>
                                        </li>{% endcomment %}
                                        <li class="timer">
                                            <a href="{% url 'blog_detail' blog.pk %}">
                                                <i class="fa fa-calendar"></i>&nbsp;{{ blog.created_time|date:"Y-m-d" }}
                                            </a>
                                        </li>
                                        <li class="view">
                                            <a href="{% url 'blog_detail' blog.pk %}">
                                                <i class="fa fa-eye"></i>&nbsp;阅读：{{ blog.get_read_num }}
                                            </a>
                                        </li>
                                        <li class="like">
                                            <a href="{% url 'blog_detail' blog.pk %}">
                                                <i class="fa fa-comments"></i>&nbsp;评论：{% get_comment_count blog %}
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        {% empty %}
                            <div class="blog">
                                <h3>暂无文章，敬请期待</h3>
                            </div>
                        {% endfor %}
                    </div>
                    <!-- content end -->

                    <!-- paginator start -->
                    <div class="paginator">
                        <ul class="pagination">
                            {# 上一页 #}
                            {% comment %}<li>
                                {% if page_of_blogs.has_previous %}
                                    <a href="?page={{ page_of_blogs.previous_page_number }}" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                {% else %}
                                    <span aria-hidden="true">&laquo;</span>
                                {% endif %}
                            </li>{% endcomment %}
                            {# 全部页码 #}
                            {% for page_num in page_range %}
                                {% if page_num == page_of_blogs.number %}
                                    <li class="active"><span>{{ page_num }}</span></li>
                                {% else %}
                                    {% if page_num == '...' %}
                                        <li><span>{{ page_num }}</span></li>
                                    {% else %}
                                        <li><a href="?page={{ page_num }}">{{ page_num }}</a></li>
                                    {% endif %}
                                {% endif %}
                            {% endfor %}
                            {# 下一页 #}
                            {% comment %}<li>
                                {% if page_of_blogs.has_next %}
                                    <a href="?page={{ page_of_blogs.next_page_number }}" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                {% else %}
                                    <span aria-hidden="true">&raquo;</span>
                                {% endif %}
                            </li>{% endcomment %}
                        </ul>
                        <p>
                            共有{{ page_of_blogs.paginator.count }}篇文章，
                            当前第{{ page_of_blogs.number }}页，共{{ page_of_blogs.paginator.num_pages }}页
                        </p>
                    </div>
                </div>
                <div class="col-md-3">
                    <!-- article type -->
                    <div class="panel panel-default artType">
                        <div class="panel-heading">
                            <span class="panel-title"><i class="fa fa-cloud"></i>&nbsp;文章分类</span>
                        </div>
                        <div class="panel-body">
                            <ul class="list-group">
                                {% for blog_type in blog_types %}
                                    <li class="list-group-item">
                                        <a href="{% url 'blogs_with_type' blog_type.pk %}">
                                            {{ blog_type.type_name }} ({{ blog_type.blog_count }})
                                        </a>
                                    </li>
                                {% empty %}
                                    <li>暂无分类</li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                    <!-- datetime -->
                    <div class="panel panel-default dateType">
                        <div class="panel-heading">
                            <span class="panel-title"><i class="fa fa-calendar"></i>&nbsp;日期归档</span>
                        </div>
                        <div class="panel-body">
                            <ul class="list-group">
                                {% for blog_date, blog_count in blog_dates.items %}
                                    <li class="list-group-item">
                                        <a href="{% url 'blogs_with_date' blog_date.year blog_date.month %}">
                                            {{ blog_date|date:"Y年m月" }} ({{ blog_count }})
                                        </a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                    <!-- hot article -->
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <span class="panel-title"><i class="fa fa-book"></i>&nbsp;热门文章</span>
                        </div>
                        <div class="panel-body">
                            <ul class="list-group">
                                {% for hot_blog in hot_blogs_for_7_days %}
                                    <li class="list-group-item hot-blogs">
                                        <span class="rank rank{{ forloop.counter }}">{{ forloop.counter }}</span>
                                        <a href="{% url 'blog_detail' hot_blog.id %}" title="{{ hot_blog.title }}">
                                            {{ hot_blog.title }}
                                        </a>
                                    </li>
                                {% empty %}
                                    <li>暂时没有热门文章</li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>

                    <!-- hot tag -->
                    <div class="panel panel-default cloud">
                        <div class="panel-heading">
                            <span class="panel-title"><i class="fa fa-tags"></i>&nbsp;热门标签</span>
                        </div>
                        <div class="panel-body">
                            <ul class="tag">
                                {% for blog_tag in blog_tags %}
                                    <a href="{% url 'blogs_with_tag' blog_tag.pk %}">
                                        {{ blog_tag.tag_name }} ({{ blog_tag.blog_count }})
                                    </a>
                                {% empty %}
                                    <li>暂无热门标签</li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                    <!-- links -->
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <span class="panel-title"><i class="fa fa-link"></i>&nbsp;友情链接</span>
                        </div>
                        <div class="panel-body">
                            <ul class="list-unstyled shiplink">
                                {% for links in links_list %}
                                    <li>
                                        <a href="{{ links.link_href }}" titile="{{ links.link_name }}" target="_blank">
                                        {{ links.link_name }}</a>
                                    </li>
                                    {% empty %}
                                    <li>暂无友链</li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
